<!doctype html>
<html lang="zh-CN">

<head>
    <title>主页</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/response.css">
</head>

<body>
    <div id='app' v-cloak>

        <div id='mask' v-if='mask'></div>
        <!-- 方案编辑 -->
        <transition enter-active-class='animated fadeIn' leave-active-class='animated fadeOut'>
            <div v-if='mask==1' class='dis-cen mask1'>
                <div>
                    <h2 class='mask1-tit'>方案编辑</h2>
                    <div style="padding:20px;">
                        <div class='programme-hea'>
                            <div class='dis-start'>
                                <div class='dis-start'>
                                    <span>方案名称：</span>
                                    <input class='programme-name' type="text" value="方案一">
                                </div>
                                <div class='dis-start programme-spacing'>
                                    <span>方案类别：</span>
                                    <div>
                                        <div class='betting-select'>
                                            <el-select v-model="programmeCategory" placeholder="请选择">
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <div class='dis-start'>
                                    <span>玩法类型：</span>
                                    <div>
                                        <div class='betting-select'>
                                            <el-select v-model="programmeType" placeholder="请选择">
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='dis-start'>
                                <div class='dis-start'>
                                    <span>玩法名称：</span>
                                    <div>
                                        <div class='betting-select'>
                                            <el-select v-model="programmeName" placeholder="请选择">
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <div class='dis-start programme-spacing'>
                                    <span>金额模式：</span>
                                    <div>
                                        <div class='betting-select'>
                                            <el-select v-model="programmeMoneyModel" placeholder="请选择">
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='programme-body'>
                            <div class='dis-start missing-number'>
                                <span>遗漏号码：</span>
                                <textarea name="" id=""></textarea>
                            </div>
                            <div class='dis-start'>
                                <span>出号范围：&nbsp;&nbsp;当遗漏&nbsp;&nbsp;</span>
                                <div>
                                    <div class='betting-select'>
                                        <el-select v-model="missingCondition" placeholder="请选择">
                                            <el-option key="1" label="小鱼等于" value="小鱼等于"></el-option>
                                            <el-option key="2" label="大于等于" value="大于等于"></el-option>
                                        </el-select>
                                    </div>
                                </div>
                                <div style='margin-left: 10px;'>
                                    <div class='betting-select'>
                                        <el-select v-model="missingNum" placeholder="请选择">
                                            <el-option key="1" label="1" value="1"></el-option>
                                            <el-option key="1" label="2" value="2"></el-option>
                                            <el-option key="1" label="3" value="3"></el-option>
                                            <el-option key="1" label="4" value="4"></el-option>
                                        </el-select>
                                    </div>
                                </div>
                            </div>
                            <div class='dis-spa programme-body-con'>
                                <div class='programme-body-left'>
                                    <div class='dis-start'>
                                        <span>号码个数：</span>
                                        <input type="text">
                                    </div>
                                    <div>
                                        <p>投注号码：&nbsp;&nbsp;&nbsp;共<span>8</span>注 <span class='hover programme-refresh-btn'>刷新</span> </p>
                                        <textarea name="" id=""></textarea>
                                    </div>
                                </div>
                                <div class='programme-body-right'>
                                    <div class='dis-start'>
                                        <span>容错个数：</span>
                                        <input type="text">
                                    </div>
                                    <div>
                                        <p class='dis-start'><input type="checkbox"><span>直线倍投</span></p>
                                        <textarea name="" id=""></textarea>
                                    </div>
                                </div>
                            </div>
                            <p class='hover programme-more-set' @click="openMoreSet">更多设置</p>
                            <div class='more-set-content' id='mask-more-set'>
                                <div class='dis-start'>
                                    <span>换号规则：</span>
                                    <div class='betting-select'>
                                        <el-select v-model="toggRule" placeholder="请选择">
                                            <el-option key="1" label="1" value="1"></el-option>
                                            <el-option key="2" label="2" value="2"></el-option>
                                            <el-option key="3" label="3" value="3"></el-option>
                                            <el-option key="4" label="4" value="4"></el-option>
                                        </el-select>
                                    </div>
                                    <input type="text" class='simple-input'>
                                    <span>期</span>
                                </div>
                                <div class='dis-start '>
                                    <span>翻倍方式：</span>
                                    <div class='betting-select'>
                                        <el-select v-model="dubleMeth" placeholder="请选择">
                                            <el-option key="1" label="1" value="1"></el-option>
                                            <el-option key="2" label="2" value="2"></el-option>
                                            <el-option key="3" label="3" value="3"></el-option>
                                            <el-option key="4" label="4" value="4"></el-option>
                                        </el-select>
                                    </div>
                                    <div class='dis-start double-meth'>
                                        <span>投注号码：</span>
                                        <p class='dis-start'><input type="checkbox"><span>正集</span></p>
                                        <p class='dis-start'><input type="checkbox"><span>反集</span></p>
                                    </div>
                                </div>
                                <div class='dis-start'>
                                    <span>盈亏跳转：</span>
                                    <p class='dis-start'><input type="checkbox"><span class='more-set-span-spa'>盈利</span><input type="text" class='simple-input'></p>
                                    <p class='dis-start more-set-spacing'><span style="margin: 0 5px 0 20px;">跳局数</span><input type="text" class='simple-input'></p>
                                    <p class='dis-start'><input type="checkbox"><span class='more-set-span-spa'>亏损</span><input type="text" class='simple-input'></p>
                                    <p class='dis-start'><span style="margin: 0 5px 0 20px;">跳局数</span><input type="text" class='simple-input'></p>
                                </div>
                                <div class='dis-start'>
                                    <span>止损盈亏：</span>
                                    <p class='dis-start more-set-spacing '><input type="checkbox"><span class='more-set-span-spa'>盈利大于</span><input type="text" class='simple-input'></p>
                                    <p class='dis-start'><input type="checkbox"><span class='more-set-span-spa'>亏损大于</span><input type="text" class='simple-input'></p>
                                </div>
                                <div class='dis-start'>
                                    <div>
                                        <p class='dis-start'><input type="checkbox"><span class='more-set-span-spa'>模拟投注输</span><input type="text" class='simple-input'></p>
                                        <p class='dis-start' style='margin-top:10px;'><input type="checkbox"><span class='more-set-span-spa'>模拟投注赢</span><input type="text" class='simple-input'></p>
                                    </div>
                                    <span style='flex:0 0 150px;text-align: center;'>循环切换</span>
                                    <div>
                                        <p class='dis-start'><input type="checkbox"><span class='more-set-span-spa'>模拟投注输</span><input type="text" class='simple-input'></p>
                                        <p class='dis-start' style='margin-top:10px;'><input type="checkbox"><span class='more-set-span-spa'>模拟投注赢</span><input type="text" class='simple-input'></p>
                                    </div>
                                </div>
                                <div class='dis-start'>
                                    <div class='dis-start more-set-spacing'>
                                        <input type="checkbox">
                                        <span class='more-set-span-spa'>方案</span>
                                        <div class='betting-select'>
                                            <el-select v-model="programmeTime" placeholder="请选择">
                                                <el-option key="1" label="1" value="1"></el-option>
                                                <el-option key="2" label="2" value="2"></el-option>
                                                <el-option key="3" label="3" value="3"></el-option>
                                                <el-option key="4" label="4" value="4"></el-option>
                                            </el-select>
                                        </div>
                                        <span class='more-set-span-spa'>内</span>
                                    </div>
                                    <div class='dis-start more-set-spacing'>
                                        <input type="checkbox">
                                        <span class='more-set-span-spa'>开始投注</span>
                                        <div class='betting-select'>
                                            <el-select v-model="startBettingTime" placeholder="请选择">
                                                <el-option key="1" label="1" value="1"></el-option>
                                                <el-option key="2" label="2" value="2"></el-option>
                                                <el-option key="3" label="3" value="3"></el-option>
                                                <el-option key="4" label="4" value="4"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <div class='dis-start '>
                                        <input type="checkbox">
                                        <span class='more-set-span-spa'>停止</span>
                                        <div class='betting-select'>
                                            <el-select v-model="stopBettingType" placeholder="请选择">
                                                <el-option key="1" label="1" value="1"></el-option>
                                                <el-option key="2" label="2" value="2"></el-option>
                                                <el-option key="3" label="3" value="3"></el-option>
                                                <el-option key="4" label="4" value="4"></el-option>
                                            </el-select>
                                        </div>
                                        <div class='betting-select' style="margin-left:5px;">
                                            <el-select v-model="stopBettingTime" placeholder="请选择">
                                                <el-option key="1" label="1" value="1"></el-option>
                                                <el-option key="2" label="2" value="2"></el-option>
                                                <el-option key="3" label="3" value="3"></el-option>
                                                <el-option key="4" label="4" value="4"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='dis-cen mask1-btn-wrap'>
                            <button class='hover' @click='mask=false;'>取消</button>
                            <button class='hover'>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 方案编辑 -->

        <!-- 投注明细 -->
        <transition enter-active-class='animated fadeIn' leave-active-class='animated fadeOut'>
            <div v-if='mask==2' class='dis-cen mask1 mask2' @click='mask=false'>
                <div @click.stop=''>
                    <h2 class='mask1-tit'>投注明细</h2>
                    <div>
                        <div class='dis-spa' style='padding:15px 20px;'>
                            <p><span>方案：</span><span>九中十投，三天买楼</span></p>
                            <p><span>奖金：</span><span>19.56</span></p>
                            <p><span>玩法：</span><span>万位【定位胆】</span></p>
                            <p><span>日期：</span><span>2018-12-28</span></p>
                            <p><span>时间：</span><span>09:01至21:01</span></p>
                        </div>
                        <div class='dis-spa betting-info bett-tit'>
                            <span>时间</span>
                            <span>期号</span>
                            <p class='dis-spa spec-col'><span>万</span><span>千</span><span>百</span><span>十</span><span>个</span></p>
                            <span>注数</span>
                            <span>倍数</span>
                            <span>轮次</span>
                            <span>金额</span>
                            <span>内容</span>
                            <span>中挂</span>
                            <span>盈亏</span>
                        </div>
                    </div>
                    <div class='betting-content-list'>
                        <div class='dis-spa betting-info betting-list'>
                            <span>11:99</span>
                            <span>2018752-21541</span>
                            <p class='dis-spa spec-col'><span>0</span><span>2</span><span>8</span><span>9</span><span>4</span></p>
                            <span>10</span>
                            <span>100</span>
                            <span>1000</span>
                            <span>78552</span>
                            <span>42...1547412</span>
                            <span>中</span>
                            <span style="color:#2ABA94;">+100</span>
                        </div>
                        <div class='dis-spa betting-info betting-list' v-for="(val,index) in 30" :key='index'>
                            <span>11:99</span>
                            <span>2018752-21541</span>
                            <p class='dis-spa spec-col'><span>0</span><span>2</span><span>8</span><span>9</span><span>4</span></p>
                            <span>10</span>
                            <span>100</span>
                            <span>1000</span>
                            <span>78552</span>
                            <span>42...1547412</span>
                            <span>中</span>
                            <span style="color:#FD4C68;">+100</span>
                        </div>
                    </div>
                    <h2 class='dis-spa mask1-tit cumulative-money'>
                        <p><span>当日盈亏：</span><span style="color:#2ABA94;">+1875221.22</span></p>
                        <p><span>累计盈亏：</span><span style="color:#FD4C68;">-1221.22</span></p>
                    </h2>
                </div>
            </div>
        </transition>
        <!-- 投注明细 -->

        <div class='user-wrap'>
            <div>
                <div class='dis-spa togg-user'>
                    <button class='togg-active hover'>下注账号</button>
                    <button class='hover'>返利账号</button>
                </div>
                <div class='dis-spa user-oth-info'>
                    <img src="./img/ava.jpg" style="width:70px;">
                    <p>187***2202</p>
                    <p>￥1245.52</p>
                    <div class='dis-spa rech-wrap'>
                        <button class='hover'>充值</button>
                        <button class='hover'>提现</button>
                    </div>
                    <div class='dis-cen hover sign-out'>
                        <img src="./img/back.svg" style="width:15px;">
                        <span>退出登陆</span>
                    </div>
                </div>
                <div class='lottery-tit'>
                    <p>开奖记录</p>
                    <p class='dis-spa'>
                        <span>期数</span>
                        <span>号码</span>
                    </p>
                </div>
            </div>
            <div class='lottery-list-wrap'>
                <div class='dis-spa lo-list' v-for="(val,index) in 100" :key='index'>
                    <span>2018411-30</span>
                    <span>11251</span>
                </div>
            </div>
        </div>
        <div class='game-wrap'>
            <div class='dis-spa lott-hea-tit'>
                <div class='dis-spa next-lott'>
                    <p>距<span>201812-21</span>期开奖时间</p>
                    <p>00：09：51</p>
                </div>
                <div class='dis-spa alre-num-wrap'>
                    <p>第<span>201812-65</span>期开奖号码</p>
                    <p class='dis-cen alre-num'>
                        <span>0</span>
                        <span>2</span>
                        <span>3</span>
                        <span>7</span>
                        <span>1</span>
                    </p>
                </div>
                <div class='dis-spa rebate-money'>
                    <p>亏损返利总金额</p>
                    <p>￥1245.14</p>
                </div>
            </div>
            <div style="margin-top:15px;box-shadow: rgba(220, 220, 220, 0.23) 0px 0px 15px;">
                <div class='com-controll'>
                    <a href='#' @click='play=1'>
                        <span :class="{'play-me-active':play==1}">自动投注</span>
                    </a>
                    <a href='#' @click='play=2'>
                        <span :class="{'play-me-active':play==2}">方案设定</span>
                    </a>
                    <a href='#' @click='play=3'>
                        <span :class="{'play-me-active':play==3}">下注记录</span>
                    </a>
                    <a href='#' @click='play=4'>
                        <span :class="{'play-me-active':play==4}">用户必看</span>
                    </a>
                    <a href='#' @click='play=5'>
                        <span :class="{'play-me-active':play==5}">关于</span>
                    </a>
                </div>
                <!-- 自动投注 -->
                <div v-if='play==1'>
                    <div class='betting-wrap'>
                        <div class='dis-spa betting-all-con'>
                            <div class='dis-spa betting-count'>
                                <div class='dis-cen'>
                                    <input class='simu-box' type="checkbox">
                                    <span>模拟投注</span>
                                </div>
                                <div class='dis-spa simulation-input-com'>
                                    <p class='dis-cen'>
                                        <input type="checkbox">
                                        <span>模拟投注输</span>
                                        <input type="text">
                                    </p>
                                    <p class='dis-cen'>
                                        <input type="checkbox">
                                        <span>模拟投注赢</span>
                                        <input type="text">
                                    </p>
                                </div>
                            </div>
                            <div class='dis-spa betting-count'>
                                <span>循环切换</span>
                                <div class='dis-spa simulation-input-com'>
                                    <p class='dis-cen'>
                                        <input type="checkbox">
                                        <span>真实投注输</span>
                                        <input type="text">
                                    </p>
                                    <p class='dis-cen'>
                                        <input type="checkbox">
                                        <span>真实投注赢</span>
                                        <input type="text">
                                    </p>
                                </div>
                            </div>
                            <div class='dis-spa simulation-input-com'>
                                <div class='dis-spa change-simu-meth'>
                                    <span>选择方案</span>
                                    <div class='betting-select'>
                                        <el-select v-model="changeProgramme" placeholder="请选择">
                                            <el-option key="1" label="9：00" value="9：00"></el-option>
                                            <el-option key="1" label="9：00" value="9：00"></el-option>
                                            <el-option key="1" label="9：00" value="9：00"></el-option>
                                            <el-option key="1" label="9：00" value="9：00"></el-option>
                                        </el-select>
                                    </div>
                                </div>
                                <div class='dis-spa'>
                                    <p class='dis-cen'>
                                        <input type="checkbox">
                                        <span>失败定投</span>
                                    </p>
                                    <p class='dis-cen'>
                                        <input type="checkbox">
                                        <span>断期停投</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='dis-spa paly-time-controll'>
                            <div class='dis-cen betting-select betting-width'>
                                <input type="checkbox">
                                <span>自动开始</span>
                                <div>
                                    <el-select v-model="autoStartTime" placeholder="请选择">
                                        <el-option key="1" label="9：00" value="9：00"></el-option>
                                        <el-option key="1" label="9：00" value="9：00"></el-option>
                                        <el-option key="1" label="9：00" value="9：00"></el-option>
                                        <el-option key="1" label="9：00" value="9：00"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class='dis-cen betting-select betting-width'>
                                <input type="checkbox">
                                <span>自动停止</span>
                                <div>
                                    <el-select v-model="autoStopTime" placeholder="请选择">
                                        <el-option key="1" label="9：00" value="9：00"></el-option>
                                        <el-option key="1" label="9：00" value="9：00"></el-option>
                                        <el-option key="1" label="9：00" value="9：00"></el-option>
                                        <el-option key="1" label="9：00" value="9：00"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class='dis-cen betting-width sleet-wrap'>
                                <input type="checkbox">
                                <span>延迟投注</span>
                                <input class='sleep-betting' type="text">
                                <span>秒后</span>
                            </div>
                            <div class='auto-betting-btn'>
                                <button class='hover'>开启自动投注</button>
                            </div>
                        </div>
                    </div>
                    <div class='dis-spa game-data-wrap'>
                        <div class='dis-cen'>
                            <p><span>真实盈亏：</span><span>0</span></p>
                            <p><span>真实下注：</span><span>0</span></p>
                            <p><span>模拟盈亏：</span><span>24.65</span></p>
                            <p><span>模拟下注：</span><span>0</span></p>
                            <p><span>最大连中：</span><span>6</span></p>
                            <p><span>最大连挂：</span><span>12</span></p>
                        </div>
                        <div class='dis-cen'>
                            <p><span>准确率：</span><span>20%</span></p>
                            <p><span>投注记录：</span><span>9期</span></p>
                            <p><span>投注状态：</span><span>无</span></p>
                        </div>
                        <div class='dis-cen me-multiple'>
                            <p class='dis-cen'><span>方案倍数乘以系数<input type="text"></span><button class='hover'>确认</button></p>
                            <p class='dis-cen'><input type="checkbox"><span>开启整体盈利回头模式</span><input type="text"></p>
                            <p><span>回头次数：</span><span>2</span><span>下次回头金额：</span><span>6</span></p>
                        </div>

                    </div>
                    <div class='game-old-data'>
                        <h4 class='dis-spa'>
                            <span>期数</span>
                            <span>方案</span>
                            <span>注数</span>
                            <span>倍数</span>
                            <span>轮次</span>
                            <span>金额</span>
                            <span>盈亏</span>
                            <span>连挂</span>
                            <span>连中</span>
                            <span>内容</span>
                            <span>开奖号码</span>
                            <span>状态</span>
                        </h4>
                        <div id='old-data-list'>
                            <p class='dis-spa' v-for='(val,index)  in 20' :key='index'>
                                <span>2018121-30555</span>
                                <span>方案4</span>
                                <span>120</span>
                                <span>160</span>
                                <span>5</span>
                                <span>1222.121</span>
                                <span>-3.211</span>
                                <span>0</span>
                                <span>4</span>
                                <span>1.23122</span>
                                <span>121231</span>
                                <span>待开奖</span>
                            </p>
                        </div>
                    </div>
                </div>
                <!-- 自动投注 -->
                <!-- 方案设定 -->
                <div v-if='play==2'>
                    <div>
                        <div class='dis-spa programme-set'>
                            <div class='dis-spa'>
                                <a href="#">方案导入</a>
                                <a href="#">方案导出</a>
                                <a href="#">清空方案</a>
                            </div>
                            <a href="#" @click='mask=1;'>添加方案</a>
                        </div>
                        <div class='dis-spa programme'>
                            <p class='dis-cen'><input type="checkbox"><span>方案名称</span></p>
                            <span>类别</span>
                            <span>玩法类型</span>
                            <span>玩法名称</span>
                            <span>金额模式</span>
                            <span>操作</span>
                        </div>
                    </div>
                    <div id='programme-list-wrap'>
                        <div class='dis-spa programme programme-info' v-for='(val,index) in 50' :key='index'>
                            <p class='dis-cen'><input type="checkbox"><span>方案sdkljfkljasdkjfkljadjskfjadksj1</span></p>
                            <span>定码轮换</span>
                            <span>定位胆</span>
                            <span>万位</span>
                            <span>元</span>
                            <div>
                                <a href="#">删除</a>
                                <a href="#" @click='mask=1;'>编辑</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 方案设定 -->
                <!-- 下注记录 -->
                <div v-if='play==3'>
                    <div>
                        <div class='dis-start bets-wrap' style="background:white;">
                            <div class='dis-spa bets-controller'>
                                <div class='dis-start'>
                                    <p><span>彩种：</span><span style="font-weight:600;color:#3A1DE9;">重庆时时彩</span></p>
                                    <div class='dis-start bets-interval'>
                                        <span>方案：</span>
                                        <div class='betting-select'>
                                            <el-select v-model="betsMeth" placeholder="请选择">
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <div class='dis-start bets-interval bets-bonus'>
                                        <span>奖金：</span>
                                        <div class='betting-select'>
                                            <el-select v-model="betsMeth" placeholder="请选择">
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                                <el-option key="1" label="9：00" value="9：00"></el-option>
                                            </el-select>
                                        </div>
                                        <input type="text">
                                    </div>
                                    <p><span>玩法：</span><span>万位【定位胆】</span></p>
                                </div>
                                <div class='dis-start'>
                                    <div class='dis-start'>
                                        <span>日期：</span>
                                        <div class='bets-change-date'>
                                            <el-date-picker v-model="betsDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                                        </div>
                                    </div>
                                    <div class='dis-spa bets-interval'>
                                        <input type="checkbox">
                                        <span>&nbsp;选择时间&nbsp;&nbsp;</span>
                                        <div class='bets-change-time'>
                                            <el-time-picker is-range v-model="betsTime" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
                                        </div>
                                    </div>
                                    <div class='dis-start'>
                                        <input type="checkbox">
                                        <span>&nbsp;每天重置数据</span>
                                    </div>
                                </div>
                            </div>
                            <div class='hover like-history-btn' @click='mask=2;'>
                                查看记录
                            </div>
                        </div>
                        <div class='dis-spa bets-tit-wrap'>
                            <span>日期</span>
                            <span>投注次数</span>
                            <span>中次数</span>
                            <span>不中次数</span>
                            <span>最多盈利</span>
                            <span>最多亏损</span>
                            <span>投注总额</span>
                            <span>盈亏总额</span>
                            <span>操作</span>
                        </div>
                    </div>
                    <div id='bets-list-wrap'>
                        <div class='dis-spa bets-info' v-for='(val,index) in 50' :key='index'>
                            <span>2018-12-28</span>
                            <span>63</span>
                            <span>18</span>
                            <span>45</span>
                            <span>154.25</span>
                            <span>-4845</span>
                            <span>32212</span>
                            <!-- #FD4C68  亏是这个颜色-->
                            <span class='profit-all'>+45411</span>
                            <a href="#" @click='mask=2;'>查看明细</a>
                        </div>
                    </div>
                </div>
                <!-- 下注记录 -->
                <!-- 用户必看 -->
                <div v-if='play==4' class='user-must-see'>
                    <h2>自动投注软件</h2>
                    <div>
                        <h4>1.免责声明</h4>
                        <p>
                            自动投注软件只是技术交流而参考使用，勿用于非法用途及商业用途，请务必遵守当地法律。明确自动投注软件仅是技术交流作用不代表任何平台，仅作为技术交流工作存在。任何网络异常和自身操作问题，此软件不承担任何盈利和损失。
                        </p>
                    </div>
                    <div>
                        <h4>2.需安装Net3.5</h4>
                        <p>
                            部分XP系统用户打开软件异常，需安装Net3.5。下载地址： http://download.microsoft.com/download/2/0/E/20E90413-712F-438C-988E-FDAA79A8AC3D/dotnetfx35.exe
                        </p>
                    </div>
                    <div>
                        <h4>3.投注方案</h4>
                        <p>
                            提示投注失败或者不符合条件投注或者断期等问题，请检查投注方案设定是否正确。
                        </p>
                    </div>
                    <div>
                        <h4>4.使用说明</h4>
                        <p>
                            可查看安装文件附带使用说明书。
                        </p>
                    </div>
                </div>
                <!-- 用户必看 -->
                <!-- 关于 -->
                <div v-if='play==5' class='user-must-see'>
                    <h2>自动投注软件</h2>
                    <div>
                        <h4>1.免责声明</h4>
                        <p>
                            自动投注软件只是技术交流而参考使用，勿用于非法用途及商业用途，请务必遵守当地法律。明确自动投注软件仅是技术交流作用不代表任何平台，仅作为技术交流工作存在。任何网络异常和自身操作问题，此软件不承担任何盈利和损失。
                        </p>
                    </div>
                    <div>
                        <h4>2.需安装Net3.5</h4>
                        <p>
                            部分XP系统用户打开软件异常，需安装Net3.5。下载地址： http://download.microsoft.com/download/2/0/E/20E90413-712F-438C-988E-FDAA79A8AC3D/dotnetfx35.exe
                        </p>
                    </div>
                    <div>
                        <h4>3.投注方案</h4>
                        <p>
                            提示投注失败或者不符合条件投注或者断期等问题，请检查投注方案设定是否正确。
                        </p>
                    </div>
                    <div>
                        <h4>4.使用说明</h4>
                        <p>
                            可查看安装文件附带使用说明书。
                        </p>
                    </div>
                </div>
                <!-- 关于 -->
            </div>
        </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script src="./js/el/index.js"></script>
    <script src='./js/jquery.min.js'></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //各种弹窗控制   1:方案编辑   2：投注明细
                mask: false,
                //游戏玩法   1:自动投注   2：方案设定   3：下注记录   4：用户必看     5：关于 
                play: 4,
                //自动投注-自动开始时间选择
                autoStartTime: '',
                //自动投注-自动停止时间选择
                autoStopTime: '',
                //自动投注-方案选择
                changeProgramme: '',
                //下注记录-方案选择
                betsMeth: '',
                //下注记录-日期选择
                betsDate: '',
                //下注记录-时间选择
                betsTime: '',
                //方案编辑弹窗-方案类别
                programmeCategory: '',
                //方案编辑弹窗-玩法类型
                programmeType: '',
                //方案编辑弹窗-玩法名称
                programmeName: '',
                //方案编辑弹窗-金额模式
                programmeMoneyModel: '',
                //方案编辑弹窗-遗漏条件
                missingCondition: '',
                //方案编辑弹窗-遗漏数字
                missingNum: '',
                //方案编辑弹窗-换号规则
                toggRule: '',
                //方案编辑弹窗-翻倍方式
                dubleMeth: '',
                //方案编辑弹窗-方案-选择时间范围
                programmeTime: '',
                //方案编辑弹窗-开始投注时间
                startBettingTime: '',
                //方案编辑弹窗-停止投注类型
                stopBettingType: '',
                //方案编辑弹窗-停止投注时间
                stopBettingTime: ''
            },
            watch: {
                //都是监控变化，初始化下拉箭头
                play: function() {
                    this.replaceIcon();
                },
                mask: function() {
                    this.replaceIcon();
                }
            },
            mounted: function() {
                var This = this;
                this.$nextTick(function() {
                    This.replaceIcon();
                });
            },
            methods: {
                replaceIcon: function() {
                    this.$nextTick(function() {
                        var par = $('.el-input__suffix-inner');
                        par.children().remove();
                        par.append('<img src="./img/down.svg" style="opacity:.5; width:20px; height:20px">');
                        var date = $('.el-icon-date');
                        var time = $('.el-icon-time');
                        date.add(time).css('display', 'flex');
                        date.add(time).addClass('dis-cen');
                        date.add(time).append('<img src="./img/down.svg" style="opacity:.5; width:20px; height:20px">');
                    });
                },
                //打开模态框中的更多设置
                openMoreSet: function() {
                    $('#mask-more-set').show();
                    $('.programme-more-set').remove();
                    $('.programme-body').animate({
                        scrollTop: '140px'
                    }, 500);
                }
            }
        });
    </script>

</body>

</html>